<template>
    <section>
        <div class="cate-container">
            <div class="header flex-box">
                <el-button @click="back">返回</el-button>
            </div>

            <div class="cate-info">
                <el-form ref="form" :model="form" :rules="rules" label-width="140px">
                    <el-form-item label="排序" prop="sort">
                        <el-input v-model.number="form.sort" placeholder="请输入排序"></el-input>
                    </el-form-item>
                    <el-form-item label="标识" prop="shop_id">
                        <el-input v-model.number="form.shop_id" placeholder="请输入标识"></el-input>
                    </el-form-item>
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="form.name" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item label="图片" prop="image">
                       <upload ref="uploadimage" :image.sync="form.image"></upload>
                    </el-form-item>
                    <el-form-item label="是否在列表中显示" prop="is_in_list" style="width: 400px">
                        <el-switch
                                v-model="form.is_in_list"
                                active-color="#13ce66"
                                inactive-color="#999999">
                        </el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('form')">添加</el-button>
                        <el-button @click="resetForm('form')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </section>
</template>

<script>
    import Upload from '../../components/basic/UploadImage/Upload.vue';

    export default {
        components: {
            Upload
        },
        data() {
            return {
                clearList: null,
                form: {
                    sort: '',
                    shop_id: '',
                    name: '',
                    image: '',
                    is_in_list: false
                },
                rules: {
                    sort: [{required: true, message: '请输入排序', trigger: 'blur'},{type:'number',message:'排序必须为数字'}],
                    shop_id: [{required: true, message: '请输入标识', trigger: 'blur'},{type:'number',message:'标识必须为数字'}],
                    name: [{required: true, message: '请选择名称', trigger: 'blur'}],
                    image: [{required: true, message: '请选择图片'}],
                    is_in_list: [{required: true, message: '请选择列表显示方式'}],
                }
            }
        },
        methods: {
            resetForm(formName) {
                console.log(this.clearList)
                this.$refs[formName].resetFields();
                this.clearList = Math.random();
            },
            back() {
                this.$router.go(-1);
            },
            // postData(data, id) {
            //     return axios.post(`admin_categories/${id || ''}`, data);
            // },
            onSubmit(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.$confirm('是否确认添加分类?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        })
                            .then(() => this.postData())
                            .then(() => {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功!'
                                });
                                this.resetForm('form');
                            })
                            .catch(err => {
                                    this.$message({
                                        type: 'error',
                                        message: `添加失败 ${err}`
                                    });
                            });
                    } else {
                        return false;
                    }
                });
            },
            genData(data) {
                console.log('上传图片',data);
                console.log(
                    {
                        sort: data.sort,
                        shop_id: data.shop_id,
                        image: data.image,
                        is_in_list: data.is_in_list,
                        name: data.name,
                    }
                )
                return {
                    sort: data.sort,
                    shop_id: data.shop_id,
                    image: data.image,
                    is_in_list: data.is_in_list === true ? 1 : 0 ,
                    name: data.name,
                };
            },
            postData() {
                return axios
                    .post('admin_categories', this.genData(this.form))
                    .then(res => {
                        console.log('提交',res)
                        return res.data.status === 1 ? Promise.resolve() : Promise.reject(res.data.msg);
                    });
            }

        }
    }
</script>
<style scoped>
    .cate-container {
        margin: 25px;
        border-radius: 4px;
        background: #fff;
        min-height: calc(100vh - 92px);
    }
    .flex-box {
        display: flex;
    }
    .header {
        padding: 10px;

        border-bottom: 1px solid #d8d8d8;
    }
    .cate-info {
        padding: 20px;
    }

</style>